import { urls } from '@/shared/constants';
import VOZandSoyuz from '@/shared/icons/logo/icon-voz-soyuz.svg';
import { Button, Container } from '@/shared/ui';
import cn from 'classnames';
import Image from 'next/image';

import { ColouredInfoBlock } from '../ColouredInfoBlock';
import cs from './About.module.scss';

export const About = () => (
  <Container className={cs.wrapper}>
    <ColouredInfoBlock className={cs.block}>
      <h2 className={cn('h2', cs.title)}>О приложении</h2>
      <p className={cn('p', cs.descr)}>
        Наше приложение помогает вводить прикорм правильно.
        <br />
        Вам не&nbsp;нужно ломать голову и&nbsp;тратить время на&nbsp;составление меню.
        <br /> Настраивайте готовую схему питания для вашего малыша.
        <br />
        <br /> Схема прикорма составлена по&nbsp;рекомендациям{' '}
        <Button className={cs.link} data-testid="link-voz" href={urls.voz} link target="_blank">
          ВОЗ
        </Button>{' '}
        и&nbsp;
        <Button className={cs.link} data-testid="link-soyuz" href={urls.soyuzPediatrov} link target="_blank">
          Союза&nbsp;педиатров&nbsp;России
        </Button>
      </p>
      <div className={cs.imgBlock}>
        <Image alt="ВОЗ и Союз педиатров России" className={cs.icon} height={100} src={VOZandSoyuz} width={190} />
      </div>
    </ColouredInfoBlock>
  </Container>
);
